<template>
	<view class="container">
		<!-- 提示信息 -->
		<view class="notice-bar">
			<text class="notice-text">温馨提示：系统仅保留最近一周内的50条配音记录</text>
		</view>
		
		<!-- 列表内容 -->
		<view class="history-list">
			<view class="history-item" v-for="(item, index) in historyList" :key="index" @tap="handlePlay(item)">
				<view class="item-info">
					<text class="item-title">{{ (item.text || '未命名配音').length > 5 ? (item.text || '未命名配音').slice(0, 5) + '...' : (item.text || '未命名配音') }}</text>
					<text class="item-time">{{ formatTime(item.created_at) }}</text>
				</view>
				<view class="item-actions">
					<text class="action-btn" >{{ item.status_text }}</text>
					<text class="action-btn" @tap.stop="handleDelete(item)">删除</text>
					<text class="action-btn" @tap.stop="handleExport(item)">导出</text>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="historyList.length === 0">
			<image class="empty-icon" src="/static/images/empty.png" mode="aspectFit"></image>
			<text class="empty-text">暂无配音历史</text>
		</view>
		
		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<text class="load-text" v-if="loading">加载中...</text>
			<text class="load-text" v-else @tap="loadMore">加载更多</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import config from '@/config'

// 列表数据
const historyList = ref([])
const page = ref(1)
const size = ref(10)
const hasMore = ref(true)
const loading = ref(false)

// 获取历史列表
async function getHistoryList(isLoadMore = false) {
	try {
		if (loading.value) return
		loading.value = true
		
		const token = uni.getStorageSync('token')
		if (!token) {
			throw new Error('未登录')
		}
		
		const result = await uni.request({
			url: `${config.apiBaseUrl}/api/audio/list`,
			method: 'GET',
			header: {
				'Authorization': token
			},
			data: {
				page: page.value,
				size: size.value
			}
		})
		
		if (result.statusCode !== 200 || result.data.code !== 200) {
			throw new Error(result.data.message || '获取失败')
		}
		
		const { list, pagination } = result.data.data
		
		if (isLoadMore) {
			historyList.value = [...historyList.value, ...list]
		} else {
			historyList.value = list
		}
		
		hasMore.value = historyList.value.length < pagination.total
	} catch (error) {
		uni.showToast({
			title: error.message || '获取失败，请重试',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 加载更多
function loadMore() {
	if (!hasMore.value || loading.value) return
	page.value++
	getHistoryList(true)
}

// 播放音频
function handlePlay(item) {
	uni.navigateTo({
		url: `/pages/export/export?url=${encodeURIComponent(item.url)}`
	})
}

// 删除配音
function handleDelete(item) {
	uni.showModal({
		title: '提示',
		content: '确定要删除这条配音记录吗？',
		success: async (res) => {
			if (res.confirm) {
				try {
					const token = uni.getStorageSync('token')
					if (!token) {
						throw new Error('未登录')
					}
					
					const result = await uni.request({
						url: `${config.apiBaseUrl}/api/audio/delete/${item.id}`,
						method: 'DELETE',
						header: {
							'Authorization': token
						}
					})
					
					if (result.statusCode !== 200 || result.data.code !== 200) {
						throw new Error(result.data.message || '删除失败')
					}
					
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
					
					// 重新加载列表
					page.value = 1
					getHistoryList()
				} catch (error) {
					uni.showToast({
						title: error.message || '删除失败，请重试',
						icon: 'none'
					})
				}
			}
		}
	})
}

// 导出配音
function handleExport(item) {
	uni.navigateTo({
		url: `/pages/export/export?url=${encodeURIComponent(item.url)}`
	})
}

// 格式化时间
function formatTime(timestamp) {
	if (!timestamp) return ''
	const date = new Date(timestamp)
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	const day = String(date.getDate()).padStart(2, '0')
	const hour = String(date.getHours()).padStart(2, '0')
	const minute = String(date.getMinutes()).padStart(2, '0')
	return `${year}-${month}-${day} ${hour}:${minute}`
}

// 页面加载时获取列表
onMounted(() => {
	getHistoryList()
})
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: #f8f8f8;
	padding: 20rpx;
}

.notice-bar {
	background: #fff7e6;
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	
	.notice-text {
		font-size: 26rpx;
		color: #ff9900;
		display: block;
		text-align: center;
	}
}

.history-list {
	.history-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.item-info {
			flex: 1;
			margin-right: 20rpx;
			
			.item-title {
				font-size: 32rpx;
				color: #333;
				margin-bottom: 10rpx;
				display: block;
			}
			
			.item-time {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.item-actions {
			display: flex;
			gap: 20rpx;
			
			.action-btn {
				font-size: 28rpx;
				color: #07c160;
				padding: 10rpx 20rpx;
				border: 1rpx solid #07c160;
				border-radius: 30rpx;
				
				&:active {
					opacity: 0.8;
				}
			}
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100rpx 0;
	
	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}

.load-more {
	text-align: center;
	padding: 30rpx 0;
	
	.load-text {
		font-size: 28rpx;
		color: #666;
		
		&:active {
			opacity: 0.8;
		}
	}
}
</style> 